<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
    <!-- 删除默认的苹果工具栏和菜单栏 ： 即启用 WebApp 全屏模式  -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- 在web app应用下状态条（屏幕顶部条）的颜色；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>国标站点实时空气质量</title>
    <script src="https://vuejs.org/js/vue.js"></script>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=bXD2LO0j2HgnWVZMXx2g5FeExhoV8HVD"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.1.2/js/jquery-weui.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"  integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
    <style>
        *{
            -webkit-box-sizing: border-box;
            -moz-box-sizing:border-box;
            box-sizing: border-box;
            padding: 0;
            margin:0;
        }
        #myTabs{
            width: max-content;
            white-space: nowrap;
            border-bottom: 1px solid #fff;
        }

        #tab_ci,#tab_aqi,#tab_pm25,#tab_pm10,#tab_co,#tab_o3,#tab_so2,#tab_no2{
            display: inline-block;
            color: #666666;
            font-size:14px;
            /*opacity: 0.7;*/
        }

        #tab_ci>div,#tab_aqi>div,#tab_pm25>div,#tab_pm10>div,#tab_co>div,#tab_o3>div,#tab_so2>div,#tab_no2>div{
             font-size:13px;
             border-radius: 2px;
             color:#fff;
             text-align:center;
             width: 2rem;
             padding-right: 10px;
             padding-left: 10px;
        }

        #myTabs>li.active{
            border-bottom: 2px solid #0a6cd6;
        }
        #myTabs>li>a{
            margin: 6px 0;
            padding:0;
        }
        #myTabs>li.active>a{
            border: 1px solid #fff;

        }
        ul.nav-tabs>li{
            border:none;
            display: inline-block;
            text-align: center;
        }
        .home{
            position: absolute;
            left: 80%;
            bottom: 2%;
        }

        .visualMap{
            position: absolute;
            width: 4.5rem;
            height: 7rem;
            background-color: #338FCC;
            opacity: 1;
            bottom: 3.5rem;
            right: -0.6rem;
            border-radius: 10px;
            display: none;
        }
        .visualMap ul{
            list-style: none;
            margin: 0;
            padding: 4px 2px;
            position: relative;
        }

        #demo_1:after {
          border: 10px solid transparent;
          border-top: 15px solid #338FCC;
          width: 0;
          height: 0;
          top: 6.9rem;
          left: 2.2rem;
          opacity: .7;
          position: absolute;
          content: ' '
        }
      .visualMap_child li span{
        display: inline-block;
        width:19px;
        height:19px;
        border-radius:5px;
        opacity:1;
      }
        .visualMap_child li p{
          margin: 0;
          font-size: 12px;
          color: #fff;
          padding-left: 1px;
        }
        .visualMap_child li{
          display: flex;
          padding: 1px 1px;
        }

        .pannal_header{
            padding:10px;
            border-bottom:1px solid #dadada;
            text-align:center;
        }

        .baidu-maps label {
		  max-width: none;
          border-radius: 2px;
		}
    </style>

</head>
<body ontouchstart>
<div id="bank">
</div>
<div class="container">
    <div id="rank" class="row">

    </div>
    <!--
    <div id="airQuality" class="row" style="overflow-x: auto;
    white-space: nowrap;">
        <div class="bs-example bs-example-tabs" data-example-id="togglable-tabs" style="overflow-x: auto;white-space: nowrap;margin-bottom: .2rem;">
           <ul id="myTabs" class="nav nav-tabs" role="tablist">
                <li id="li_ci" role="presentation" class="active">
                    <a href="#ci" id="tab_ci" role="tab" data-toggle="tab" aria-controls="ci" aria-expanded="true">
                        综指
                        <br/>
                        <div v-bind:style="{background:ci_bgcolor}" class="bgcolor">{{ci}}
                        </div>
                    </a>
                </li>
                <li id="li_aqi" role="presentation">
                    <a href="#aqi" id="tab_aqi" role="tab" data-toggle="tab" aria-controls="aqi" aria-expanded="true">
                        AQI<br/><div v-bind:style="{background:aqi_bgcolor}" class="bgcolor">{{aqi}}</div>
                    </a>
                </li>
                <li id="li_pm25" role="presentation">
                    <a href="#pm25" id="tab_pm25" role="tab" data-toggle="tab" aria-controls="pm25" aria-expanded="true">
                        PM2.5<br/><div v-bind:style="{background:pm25_bgcolor}" class="bgcolor">{{pm25}}</div>
                    </a>
                </li>
                <li id="li_pm10" role="presentation">
                    <a href="#pm10" id="tab_pm10" role="tab" data-toggle="tab" aria-controls="pm10" aria-expanded="true">
                        PM10<br/><div v-bind:style="{background:pm10_bgcolor}" class="bgcolor">{{pm10}}</div>
                    </a>
                </li>
                <li id="li_co" role="presentation">
                    <a href="#co" id="tab_co" role="tab" data-toggle="tab" aria-controls="co" aria-expanded="true">
                        CO<br/><div v-bind:style="{background:co_bgcolor}" class="bgcolor">{{co}}</div>
                    </a>
                </li>
                <li id="li_o3" role="presentation">
                    <a href="#o3" id="tab_o3" role="tab" data-toggle="tab" aria-controls="o3" aria-expanded="true">
                        O3<br/><div v-bind:style="{background:o3_bgcolor}" class="bgcolor">{{o3}}</div>
                    </a>
                </li>
                <li id="li_so2" role="presentation">
                    <a href="#so2" id="tab_so2" role="tab" data-toggle="tab" aria-controls="so2" aria-expanded="true">
                        SO2<br/><div v-bind:style="{background:so2_bgcolor}" class="bgcolor">{{so2}}</div>
                    </a>
                </li>
                <li id="li_no2" role="presentation">
                    <a href="#no2" id="tab_no2" role="tab" data-toggle="tab" aria-controls="no2" aria-expanded="true">
                        NO2<br/><div v-bind:style="{background:no2_bgcolor}" class="bgcolor">{{no2}}</div>
                    </a>
                </li>
            </ul>

        </div>
        
        <div class="row" style="background:#ebebeb; height: 40px; padding:10px;">
          <button id="pre">前一个小时</button><button id="next">下一个小时</button>
        </div>
    -->
    </div>
    <div class="row">
        <div id="urbanMap" class="baidu-maps" style="height:28rem;"></div>
    </div>

</div>

<script type="text/javascript">
    //var tanChuang=document.getElementsByClassName("visualMap");


   // 初始化数据绑定
    var rank = new Vue({
        el: '#rank',
        data: {
            rankOfUrban: '',
            rankOfBinhai: ''
        }
    });

    //初始化baidu地图
	// 百度地图API功能
	var map = new BMap.Map("urbanMap");
	//var point = new BMap.Point(117.464843, 39.123571);
    //var point = new BMap.Point(116.404449, 39.914889);
    var point = new BMap.Point(117.770911,39.133768);
    

	map.centerAndZoom(point, 13);
    map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放

    var opts = {anchor: BMAP_ANCHOR_TOP_LEFT};
    map.addControl(new BMap.NavigationControl(opts));
    
    //map.addControl(new BMap.MapTypeControl());          //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));
    map.disable3DBuilding();

    map.addEventListener("tilesloaded",this.loadedMapHandler);

    /*
    var tilelayer = new BMap.TileLayer();         // 创建地图层实例    
    tilelayer.getTilesUrl=function(tileCoord,zoomNum){   
        console.log("zoomNum" + zoomNum);
        console.log("titleCoord.x: " + tileCoord.x + "  titleCoord.y: " + tileCoord.y);
        // 设置图块路径     
        return "images/2018011209.png";      
    };      
    map.addTileLayer(tilelayer);  */

    //var SW = new BMap.Point(117.7166833871,39.0929994978); //左下
    //createMarker(SW);
    createGroundOverlay();

    function loadedMapHandler(env){
        var level = map.getZoom(); // 定义地图缩放等级的变量
        var center = map.getCenter();

        console.log("当前地图中心点：" +center.lng +"," +center.lat);
        console.log("当前地图缩放级别："+level);
    }


    function createMarker(point){
        
        var iconUrl = "images/Archive/2018011319.png";
        var myIcon = new BMap.Icon(iconUrl, new BMap.Size(1000,1000));
        // 创建标注
        var iconMak = new BMap.Marker(point,{icon:myIcon});

        this.map.addOverlay(iconMak);
    }


    function createGroundOverlay(){

                var SW = new BMap.Point(117.7166833871,39.0929994978); //左下
                var NE = new BMap.Point(117.8302770181,39.2257389710); //右上


        //createDevMaker(SW);
        //createDevMaker(NE);

          var groundOverlayOptions = {
            opacity: 0.5,
            displayOnMinLevel: 10,
            displayOnMaxLevel: 14
          }

          // 初始化GroundOverlay
          var groundOverlay = new BMap.GroundOverlay(new BMap.Bounds(SW, NE), groundOverlayOptions);

          // 设置GroundOverlay的图片地址
          groundOverlay.setImageURL('images/Archive/2018011319.png');

          // 添加GroundOverlay
            map.addOverlay(groundOverlay);

    }


    function createDevMaker(point){
        //var point = new BMap.Point(data.lng,data.lat);
        var opts = {
            position : point    // 指定文本标注所在的地理位置
            //,offset   : new BMap.Size(-20, 10)    //设置文本偏移量
        }

        var iconUrl = "images/dev_station_small.png";
        var myIcon = new BMap.Icon(iconUrl, new BMap.Size(30,30));
        // 创建标注
        var iconMak = new BMap.Marker(point,{icon:myIcon});

        this.map.addOverlay(iconMak);
    }
</script>

</body>
</html>
